import { Button } from 'antd'
import React, { memo, useEffect, useState } from 'react'
import { fetchFollowers } from '../../api/fans'
import ThemeCard from '../../components/themeCard'
import { PlusOutlined } from '@ant-design/icons'
import './style.less'
import { IFansItem } from './types'

const Fans: React.FC = () => {
  const [fans, setFans] = useState<IFansItem[]>([])
  const [current, setCurrent] = useState<number>(1)
  const [total, setTotal] = useState<number>(0)
  const [pageSize, setPageSize] = useState<number>(20)

  useEffect(() => {
    reqData()
  }, [])
  const reqData = () => {
    fetchFollowers({
      page: current,
      per_page: pageSize,
    }).then((res: any) => {
      if (res.message === 'OK' && res.data) {
        const { results = [], total_count } = res.data
        setTotal(total_count)
        setFans(results)
      }
    })
  }

  return (
    <ThemeCard title="粉丝管理">
      <ul className="fans-list ">
        {fans.length
          ? fans.map((v: IFansItem, i) => (
              <li className="item-fans" key={v.id}>
                <img src={v.photo} alt="" />
                <div className="username">{v.name}</div>
                <Button shape="round" icon={<PlusOutlined />} type="primary">
                  关注
                </Button>
              </li>
            ))
          : null}
      </ul>
    </ThemeCard>
  )
}

export default memo(Fans)
